<template>
	<div class="contents">
		<van-cell-group>
			<van-field v-model="userInfo.mobile" center clearable label="手机号" placeholder="请输入11位手机号" type="tel" readonly>
			</van-field>
			<van-field v-model="captcha" center clearable label="验证码" placeholder="请输入验证码" type="number">
				<span slot="button" class="getcode" @click="getCode">{{codeName}}</span>
			</van-field>
			<van-field v-model="newmobile" center clearable label="新号码" placeholder="请输入您现在新的手机号码" type="tel">
			</van-field>
		</van-cell-group>
		<div class="button-sub">
			<van-button type="primary" block color="#FE7700" round @click="changeMobile">提交</van-button>
		</div>
	</div>
</template>

<script>
	export default {
		name: "Mobile",
		components: {

		},
		data() {
			return {
				captcha: "",
				newmobile: '',
				mobile: '',
				codeName: "获取验证码",
				userInfo: {},
				timer: null,
				count: 60
			}
		},
		mounted() {
			this.userInfo = JSON.parse(this.$getcookie("userInfo"))
			let userData = {
				user_id: this.userInfo.user_id,
				token: this.$getcookie("jy_token")
			}

			this.$api.my.info(userData).then(res => {
				// 执行某些操作
				this.userInfo = res.data
				this.$setcookie("userInfo", JSON.stringify(res.data))


			})
		},
		methods: {
			getCode() {
				const TIME_COUNT = 60;
				let that = this
				if (!this.timer) {
					let sendData = {
						mobile: this.userInfo.mobile,
						event: "changemobile"
					}
					this.$api.login.send(sendData).then(res => {
						if (res.code == 1) {
							this.$toast.success(res.msg)
							this.count = TIME_COUNT;
							this.timer = setInterval(() => {

								if (that.count > 0 && that.count <= TIME_COUNT) {
									that.count--;
									this.codeName = that.count + 's'

								} else {

									clearInterval(that.timer);
									this.codeName = "重新发送"
									that.timer = null;

								}

							}, 1000)
						} else {
							this.$toast.fail(res.msg)
						}
					})
				}
			},
			changeMobile() {
				let changeData = {
					user_id: this.userInfo.user_id,
					token: this.$getcookie("jy_token"),
					mobile: this.userInfo.mobile,
					newmobile: this.newmobile,
					captcha: this.captcha
				}
				let checkData = {
					captcha: this.captcha,
					mobile: this.userInfo.mobile,
					event: "changemobile"
				}
				this.$api.login.check(checkData).then(res => {
					// 执行某些操作
					if (res.code == 1) {
						this.$api.my.changemobile(changeData).then(resq => {
							// 执行某些操作
							if (resq.code == 1) {
								this.$api.my.info(changeData).then(resp => {
									// 执行某些操作
									this.$setcookie("userInfo", JSON.stringify(resp.data))
									this.$toast.success(resp.msg)
									this.$router.go(-1)
								})
							} else {
								this.$toast.fail(resq.msg)
							}



						})
					}else{
						this.$toast.fail(res.msg)
					}
				})


			}
		}



	}
</script>

<style lang="less">
	.contents {
		margin-top: 0.59rem;

		.van-field__label {
			font-size: 0.88rem;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(0, 0, 0, 1);
			width: auto;
			margin-right: 0.84rem;
		}

		.van-field__control {
			font-size: 0.81rem;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000;
		}

		.van-field__control::-webkit-input-placeholder {
			font-size: 0.81rem;
			font-family: PingFang SC;
			font-weight: 500;
			color: #A5A5A5;
		}

		.getcode {
			font-size: 0.81rem;
			font-family: PingFang SC;
			font-weight: 500;
			text-decoration: underline;
			color: rgba(254, 119, 0, 1);
			margin-right: 2rem;
		}

		.button-sub {
			width: 16.56rem;
			margin: 3.28rem auto;
		}

		.van-button {
			height: 3.06rem;
			font-size: 0.94rem;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			line-height: 3.06rem;
		}


	}
</style>
